<template>
  <section id="projects" class="section">
    <div class="container-full">
      <h2 class="section-title fade-in">精选项目</h2>
      <div class="projects-grid">
        <div
          v-for="(project, index) in projects"
          :key="project.id"
          class="project-card card"
          :style="{ animationDelay: `${index * 0.1}s` }"
          @mouseenter="activeProject = index"
          @mouseleave="activeProject = null"
        >
          <div class="project-image">
            <div class="project-overlay">
              <div class="project-links">
                <a
                  v-if="project.github"
                  :href="project.github"
                  target="_blank"
                  class="project-link"
                >
                  <span>GitHub</span>
                </a>
                <a
                  v-if="project.demo"
                  :href="project.demo"
                  target="_blank"
                  class="project-link"
                >
                  <span>在线演示</span>
                </a>
              </div>
            </div>
            <div class="project-number">0{{ index + 1 }}</div>
          </div>
          <div class="project-content">
            <h3 class="project-title">{{ project.title }}</h3>
            <p class="project-description">{{ project.description }}</p>
            <div class="project-tech">
              <span
                v-for="tech in project.tech"
                :key="tech"
                class="tech-badge"
              >
                {{ tech }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const activeProject = ref(null)

const projects = [
  {
    id: 1,
    title: '电商管理平台',
    description: '基于Vue 3构建的全栈电商管理系统，包含商品管理、订单处理、数据分析等功能模块。采用微服务架构，支持高并发访问。',
    tech: ['Vue 3', 'TypeScript', 'Node.js', 'MongoDB'],
    github: 'https://github.com',
    demo: 'https://demo.example.com'
  },
  {
    id: 2,
    title: '实时协作白板',
    description: '支持多人实时协作的在线白板应用，集成了绘图、思维导图、文件共享等功能。使用WebSocket实现实时同步。',
    tech: ['React', 'Socket.io', 'Canvas API', 'Redis'],
    github: 'https://github.com',
    demo: 'https://demo.example.com'
  },
  {
    id: 3,
    title: 'AI内容生成平台',
    description: '集成GPT模型的智能内容生成工具，支持文章写作、代码生成、图像创作等多种场景。提供RESTful API。',
    tech: ['Next.js', 'OpenAI API', 'PostgreSQL', 'AWS'],
    github: 'https://github.com',
    demo: 'https://demo.example.com'
  },
  {
    id: 4,
    title: '企业级知识库系统',
    description: '面向企业内部的文档管理系统，支持全文搜索、版本控制、权限管理。采用React + Node.js全栈开发。',
    tech: ['Vue 3', 'Express', 'Elasticsearch', 'Docker'],
    github: 'https://github.com',
    demo: 'https://demo.example.com'
  },
  {
    id: 5,
    title: '移动端健身应用',
    description: '跨平台移动健身应用，提供训练计划、进度跟踪、社区交流等功能。基于React Native开发。',
    tech: ['React Native', 'Firebase', 'Redux', 'AWS S3'],
    github: 'https://github.com',
    demo: 'https://demo.example.com'
  },
  {
    id: 6,
    title: '数据分析仪表板',
    description: '实时数据可视化平台，支持多种图表类型和数据源接入。使用D3.js实现复杂的数据交互效果。',
    tech: ['Vue 3', 'D3.js', 'Python', 'Flask'],
    github: 'https://github.com',
    demo: 'https://demo.example.com'
  }
]
</script>

<style scoped>
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.project-card {
  padding: 0;
  overflow: hidden;
  animation: slideInUp 0.6s ease-out both;
  cursor: pointer;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-image {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(255, 0, 255, 0.1));
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 14, 39, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-links {
  display: flex;
  gap: 1rem;
}

.project-link {
  padding: 0.8rem 1.5rem;
  background: transparent;
  border: 2px solid var(--accent-blue);
  color: var(--accent-blue);
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s;
}

.project-link:hover {
  background: var(--accent-blue);
  color: var(--bg-primary);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

.project-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 4rem;
  font-weight: 700;
  color: rgba(0, 217, 255, 0.1);
  font-family: 'JetBrains Mono', monospace;
}

.project-content {
  padding: 2rem;
}

.project-title {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.project-title::after {
  content: '/>';
  color: var(--accent-purple);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
}

.project-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-badge {
  padding: 0.4rem 0.8rem;
  background: rgba(0, 217, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--accent-blue);
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}
</style>
